다양한 버그가 있는 브라우저와 열악한 디버깅 도구만 있는 모바일 환경에서의 개발은 사막에서 물을 찾는 것과 같이 힘들고 막연한 작업이다. 이 책은 국내 1위 포털 서비스인 네이버에서 사용하는 모바일 프레임워크인 JMC(Jindo Mobile Component)를 만들면서 겪은, 오아시스 같은 경험을 공유한다.



모바일 웹에서 자주 사용하는 기능의 기본 원리와 구현 방법을 설명하고, 동작을 직접 확인해 볼 수 있는 샘플 페이지도 제공한다. 자바스크립트와 마크업(HTML, CSS)에 관한 기초 지식이 있다면 초보 개발자도 쉽게 모바일 웹 서비스를 만들어 볼 수 있을 것이다.

모바일 기술은 계속 변화하고 새로운 플랫폼과 새로운 개발 도구, 새로운 기기들이 쏟아져 나오지만, 이 책에서 설명하고 있는 원리를 익힌다면 변화하는 모바일 기술도 쉽게 따라갈 수 있으리라 기대한다.



★ 이 책에서 다루는 내용 ★



◎ 모바일 웹에서 발생하는 이벤트의 특징

◎ 모바일 웹에서 자주 사용하는 UI의 기본 원리와 구현 방법

◎ JMC를 활용한 웹 페이지 개발

◎ 다양한 애니메이션 구현 방법과 성능 향상 방법

◎ 모바일 환경에서 사용할 수 있는 디버깅 도구

LG CNS에서 소프트웨어 아키텍트와 백엔드 개발자로 일하다 모바일에 끌려 프런트엔드 개발자로 급선회했다. 아내와 아들밖에 모르는 철부지 남편으로서, 육아, 경제 그리고 맥주에 관심이 많은 평범한 직장인 개발자다. 현재는 네이버에서 JMC 개발 및 모바일 기술 지원을 담당하고 있다.

[1부] 모바일 웹과 모바일 웹 개발



01: 모바일 웹

모바일 웹과 모바일 앱

모바일 웹과 모바일 앱의 특징

모바일 웹의 한계 극복



02: 모바일 웹의 특징

많은 브라우저 환경

기기별 다양한 해상도

최신 웹 기술

그 밖의 특징



03: 모바일 자바스크립트 프레임워크

자바스크립트 프레임워크

모바일 자바스크립트 프레임워크

모바일 앱과 같은 UI와 사용자 경험을 제공하는 프레임워크

그 밖의 라이브러리



[2부] 모바일 웹 개발과 이벤트



04: 모바일 웹 UI 개발

웹 페이지 구성 요소

이벤트 처리



05: 모바일 브라우저와 이벤트

모바일 브라우저 이벤트

이벤트 발생 순서



06: 모바일 브라우저 전용 이벤트

터치 이벤트

제스처 이벤트

orientationchange 이벤트

devicemotion 이벤트



07: 데스크톱과 다르게 동작하는 이벤트

scroll 이벤트

마우스 이벤트와 키보드 이벤트

pageshow 이벤트, pagehide 이벤트



[3부] 모바일 웹에서 자주 사용하는 UI



08: 모바일 기기 확인하기

UserAgent 속성

모바일 기기 정보 확인하기

모바일 기기 확인 모듈



09: 모바일 기기의 위치 확인하기

geolocation API

geolocation API로 확인할 수 있는 정보

geolocation API의 오류 정보

geolocation 사용 예제



10: 모바일 기기 회전 확인하기

orientationchange 이벤트의 문제와 해결 방법

범용적으로 동작하도록 구현하는 방법

모바일 기기 회전 확인 모듈

모바일 기기 회전 확인 모듈 사용하기



11: 위치가 고정된 배너 만들기

배너 UI의 기본 원리

배너 UI에서 고려해야 할 것

다양한 환경에서 동작하는 배너 UI 구현

위치가 고정된 배너 사용하기



12: 스크롤되는 콘텐츠 만들기

position:fixed 속성의 문제

스크롤 영역의 기본 원리

스크롤 영역 구현하기

mScroll 컴포넌트 적용



13: 사용자 터치 움직임 분석하기

터치 이벤트 분석 컴포넌트

터치 이벤트를 이용한 제스처 분석 방법

mTouch 컴포넌트를 이용한 사용자 움직임 분석 결과 보기



14: 플리킹되는 콘텐츠 만들기

플리킹 UI의 기본 구조

플리킹 UI 구현하기

iOS에서의 링크 이동 문제

플리킹되는 컴포넌트 모듈

mFlicking 컴포넌트 적용



[4부] 컴포넌트를 활용한 UI 제작



15: JMC로 모바일 웹 메인 페이지 만들기

JMC

샘플 페이지

샘플 페이지 준비



16: 미디어 쿼리 적용

미디어 쿼리

샘플 페이지에 미디어 쿼리 적용

미디어 쿼리 적용 결과



17: 플리킹 사용하기

슬라이드 플리킹 컴포넌트

슬라이드 플리킹 컴포넌트 적용

슬라이드 플리킹 적용 결과



18: 숨어 있는 메뉴 사용하기

SlideReveal 컴포넌트

SlideReveal 컴포넌트를 사용하기 위한 마크업 구성

SlideReveal 컴포넌트 적용

SlideReveal 컴포넌트를 적용한 결과



19: 스크롤 사용하기

Scroll 컴포넌트

Scroll 컴포넌트 적용

Scroll 컴포넌트를 적용한 결과



[부록]



부록A: 효과적인 애니메이션 구현하기

자바스크립트 기반의 애니메이션

CSS3기반의 애니메이션

자바스크립트 기반 애니메이션과 CSS3기반 애니메이션의 혼합

브라우저 렌더링 과정



부록B: 애니메이션 성능을 높이는 방법

애니메이션 성능을 높이는 방법

애니메이션 성능 개선 연습



부록C: 모바일 웹 디버깅

모바일 웹 개발자 도구

브라우저의 개발자 도구 사용하기

원격 디버깅 도구

weinre